<template>
  <a-layout id="vultr-com">
    <a-layout-sider
      breakpoint="lg"
      collapsedWidth="0"
      @collapse="onCollapse"
      @breakpoint="onBreakpoint"
    >
      <div class="logo">
        <icon-base width="50" height="50" icon-name="bird" icon-color="mintcream" >
          <icon-bird></icon-bird>
        </icon-base>
      </div>
      <div class="nav">
        <a-menu theme="light" mode="vertical" :defaultSelectedKeys="['Products']" class="nav-menu" @click="onClickItem">
          <a-menu-item key="Products" class="nav-item">
            <a-icon type="appstore" theme="twoTone" class="nav-icon" />
            <span class="nav-text">Products</span>
          </a-menu-item>
          <a-menu-item key="Billing" class="nav-item">
            <a-icon type="calculator" theme="twoTone" class="nav-icon" />
            <span class="nav-text">Billing</span>
          </a-menu-item>
          <a-menu-item key="Support" class="nav-item">
            <a-icon type="tool" theme="twoTone" class="nav-icon" />
            <span class="nav-text">Support</span>
          </a-menu-item>
          <a-menu-item key="Affiliate" class="nav-item">
            <a-icon type="flag" theme="twoTone" class="nav-icon" />
            <span class="nav-text">Affiliate</span>
          </a-menu-item>
          <a-menu-item key="Account" class="nav-item">
            <a-icon type="home" theme="twoTone" class="nav-icon" />
            <span class="nav-text">Account</span>
          </a-menu-item>
        </a-menu>
      </div>
    </a-layout-sider>
    <a-layout class="lay">
      <a-layout-header class="lay-h">
        <div class="news-bar">
          <a class="news-title" target="_blank" @click="onClickNews">News:</a>
          <a class="news-article" target="_blank">{{topNews}}</a>
        </div>
        <div class="act-bar">
          <a-tooltip placement="bottom" title="View Tickets">
            <a-button type="link" size="large" icon="mail" />
          </a-tooltip>
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item key="1"><a-icon type="profile" />Profile</a-menu-item>
              <a-menu-item key="2"><a-icon type="safety-certificate" />Authentication</a-menu-item>
              <a-menu-item key="3"><a-icon type="api" />API</a-menu-item>
              <a-menu-item key="4"><a-icon type="team" />Users</a-menu-item>
              <a-menu-item key="5"><a-icon type="notification" />Notifications</a-menu-item>
              <a-menu-divider />
              <a-menu-item key="6"><a-icon type="close-circle" />Logout</a-menu-item>
            </a-menu>
            <a-button type="link" size="large" icon="user" >
              Yudongxi 
              <a-icon type="down" /> 
            </a-button>
          </a-dropdown>
        </div>
      </a-layout-header>
      <a-layout-content class="lay-c">
        <Products v-if="navKey === 'Products'" />
        <Billing v-if="navKey === 'Billing'" />
        <Account v-if="navKey === 'Account'" v-bind:userName="userName"/>
      </a-layout-content>
      <a-layout-footer class="lay-f">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
import IconBase from './IconBase'
import IconBird from './icons/IconBird'
import Products from './pages/Products'
import Billing from './pages/Billing'
import Account from './pages/Account'
import axios from "axios";
  export default {
    data() {
      return {
        navKey: "Products",
        topNews: "New Version Release!",
        userName: "Yudongxi",
      }
    },
    mounted() {
      // axios
      //   .get('http://localhost:8888/helloworld')
      //   .then(response => (this.topNews = response))
    },
    components: {
      IconBase,
      IconBird,
      Products,
      Billing,
      Account,
    },
    methods: {
      onCollapse(collapsed, type) {
        console.log(collapsed, type);
      },
      onBreakpoint(broken) {
        console.log(broken);
      },
      onClickItem(obj) {
        this.navKey = obj["key"];
      },
      onClickNews() {
        axios
          .get('http://localhost:8888/helloworld')
          .then(resp => (this.topNews = resp.data))
          .catch(err => console.log(err))
      },
    },
  };
</script>

<style>
  #vultr-com .logo {
    padding: 20px 0;
    height: 100px;
    text-align: center;
    background-color: #142467;
  }
  #vultr-com .nav-menu {
    display: block;
  }
  #vultr-com .nav-item {
    padding: 10px;
    margin: 0;
    height: 100px;
  }
  #vultr-com .nav-icon {
    padding: 0;
    margin: 0;
    display: block;
    font-size: 40px;
  }
  #vultr-com .nav-text {
    display: block;
    text-align: center;
    font-size: 20px;
  }
  #vultr-com .lay {
    background-color: #ffffff;
    padding: 0 auto;
  }
  #vultr-com .lay-h {
    display: flex;
    margin: auto;
    width: 100%;
    height: 50px;
    padding: 0 30px;
    border-bottom: 1px solid #E6e7eb;
    background-color: white;
    position: relative;
    overflow: unset;
  }
  #vultr-com .news-bar {
    margin-right: auto;
    display: flex;
    align-items: center;
  }
  #vultr-com .news-title {
    padding-right: 8px;
    color: #007bfc;
    text-transform: uppercase;
    font-weight: 800;
  }
  #vultr-com .act-bar {
    margin-left: auto;
    display: flex;
    align-items: center;
  }
  #vultr-com .lay-h2 {
    display: flex;
    margin: auto;
    width: 100%;
    height: 60px;
    padding: 0 30px;
    background-color: white;
  }
  #vultr-com .lay-c {
    margin: 0;
  }
  #vultr-com .lay-f {
    text-align: center;
  }
</style>
